import React, { Component } from 'react'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline, LeftOutline } from 'antd-mobile-icons'
import { userLogin, userRegister } from '@api'
import './index.scss'

export default class Register extends Component {
  formRef = React.createRef()
  state = {
    isshow: false,
    isshow2: false,
    getpsw: ''
  }
  render() {
    return (
      <div className='sc_login'>
        <div className="item-head">
          <div className="goback" onClick={this.goBack}><LeftOutline /></div>
          <div className="title">注册</div>
          <div className="gopage" onClick={this.goLogin}>登录</div>
        </div>
        <Form
          layout='horizontal'
          ref={this.formRef}
          footer={
            <Button block type='submit' color='danger' onClick={this.userRegister}>
              注册
            </Button>
          }
        >
          <div className='username'>
            <Form.Item name='username' rules={[{ required: true, message: '姓名不能为空' }, { pattern: /^[a-zA-Z0-9_()（）\u4e00-\u9fa5]{1,10}$/, message: "账号为1至32位汉字、字母、数字、下划线或中英文括号" }]} >
              <Input placeholder='请输入用户名' onChange={console.log} />
            </Form.Item>
          </div>
          <div className='password'>
            <Form.Item name='pwd' rules={[{ required: true, message: '密码不能为空' }]} >
              <Input placeholder='请输入密码' onChange={this.getpsw} type={this.state.isshow ? 'text' : 'password'} />
            </Form.Item>
            <div className='showpwd' onClick={this.showPwd}>
              {
                this.state.isshow ? <EyeOutline /> : <EyeInvisibleOutline />
              }
            </div>
          </div>
          <div className='password'>
            <Form.Item name='pwd2' rules={[{ required: true, message: '密码不能为空' }, { validator: this.pswReconfirm }]} >
              <Input placeholder='请再次输入密码' type={this.state.isshow2 ? 'text' : 'password'} />
            </Form.Item>
            <div className='showpwd' onClick={this.showPwd2}>
              {
                this.state.isshow2 ? <EyeOutline /> : <EyeInvisibleOutline />
              }
            </div>
          </div>
        </Form>
      </div>
    )
  }
  componentWillUnmount() {
    this.setState = () => false;
  }
  // 是否显示密码
  showPwd = () => {
    this.setState({
      isshow: !this.state.isshow
    })
  }
  // 是否显示密码
  showPwd2 = () => {
    this.setState({
      isshow2: !this.state.isshow2
    })
  }
  // 后退
  goBack = () => {
    this.props.history.go(-1)
  }
  // 去登录页
  goLogin = () => {
    this.props.history.push('/login')
  }
  // 获取密码
  getpsw = (value) => {
    this.setState({
      getpsw: value
    })
  }
  // 自定义的验证方式
  // @param {Object}   rule      可以在里面获取到验证对象(getFieldProps 的第一个参数对应)
  // @param {String}   value     输入框当前值
  // @param {Function} callback  触发失败的回调函数(返回错误信息)
  // return Promise.reject('两次密码输入不一样')
  // 确认两次密码是否一样
  pswReconfirm = (rule, value, callback) => {
    if (value !== this.state.getpsw) {
      // callback(new Error('两次密码输入不一样')) // 已经弃用
      return Promise.reject('两次密码输入不一样')
    }
    return Promise.resolve()
  }
  // 注册
  userRegister = () => {
    // console.log(this.formRef.current.getFieldValue());
    this.formRef.current.validateFields().then((res) => {
      userRegister({
        ...this.formRef.current.getFieldValue()
      }).then((res) => {
        if (res.data.code === 0) {
          Toast.show({
            icon: 'loading',
            content: '注册成功,自动登录ing',
            duration: 600,
            afterClose: () => {
              userLogin({
                deviceId: '设备ID：6666',
                deviceName: '设备名称：66666',
                ...this.formRef.current.getFieldValue()
              }).then((res) => {
                localStorage.setItem('token', res.data.data.token)
                this.props.history.push('/user')
              })
            }
          })
        } else {
          Toast.show({
            icon: 'fail',
            content: res.data.msg,
            duration: 1000
          })
        }
      })
    })
      .catch((rep) => {
        console.log(rep);
      })

  }
}